<!DOCTYPE html>  
<html>  
<head>  
    <style>  
        body, html {  
            height: 100%;  
            margin: 0;  
            padding: 0;  
        }  
  
        body {  
            /* 设置背景图像路径 */  
            background-image: url("./photo/背景.png");  
              
            /* 设置背景图像铺满整个容器 */  
            background-size: cover;  
              
            /* 设置背景图像始终位于容器的中心 */  
            background-position: center;  
              
            /* 设置背景图像不重复 */  
            background-repeat: no-repeat;  
              
            /* 固定背景图像，使页面内容滚动时背景图像保持固定 */  
            background-attachment: fixed;  
           
        }  
        h1{ text-align: center;
            font-size: 60px;
        }
        fieldset {  
           text-align: center;  /*居中 */
         
            border: 5px solid black; /* 可选：设置边框以便更清楚地看到fieldset的边界 */  
            padding: 10px; /* 可选：添加一些内边距 */  
            margin: 0 auto; /* 可选：使fieldset在页面上水平居中 */  
            width: 800px;
            height: 600px;
        }  
        .x{
             
            position: absolute;  
            top: 0;  
            right: 0;  
        }
        .y{   
            position: absolute;  
            top: 0;  
            left: 0;  

        }
        .a{
            display: flex;  
            justify-content: center; 
        }
        
          .photo-gallery {  
    width: 100%;  
    max-width: 960px; 
  
}  
  
.photo-row {  
    display: flex;  
    
    margin-bottom: 20px; 
}  
  
.photo-row img {  


    flex: 1; 
    max-width: 33.33%; 

 
}
	/* 按钮 */

  button {
	  margin: 20px;
	}
	.custom-btn {
	  width: 130px;
	  height: 40px;
	  color: #fff;
	  border-radius: 5px;
	  padding: 10px 25px;
	  font-family: 'Lato', sans-serif;
	  font-weight: 500;
	  background: transparent;
	  cursor: pointer;
	  transition: all 0.3s ease;
	  position: relative;
	  display: inline-block;
	   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
	   7px 7px 20px 0px rgba(0,0,0,.1),
	   4px 4px 5px 0px rgba(0,0,0,.1);
	  outline: none;
	}
  	/* 12 */
		.btn-12{
		  position: relative;
		  right: 20px;
		  bottom: 20px;
		  border:none;
		  box-shadow: none;
		  width: 130px;
		  height: 40px;
		  line-height: 42px;
		  -webkit-perspective: 230px;
		  perspective: 230px;
		}
		.btn-12 span {
		  background: rgb(1, 14, 19);
		background: linear-gradient(0deg, rgb(1, 14, 19) 0%, rgb(0, 6, 11) 100%);
		  display: block;
		  position: absolute;
		  width: 130px;
		  height: 40px;
		  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
		   7px 7px 20px 0px rgba(0,0,0,.1),
		   4px 4px 5px 0px rgba(0,0,0,.1);
		  border-radius: 5px;
		  margin:0;
		  text-align: center;
		  -webkit-box-sizing: border-box;
		  -moz-box-sizing: border-box;
		  box-sizing: border-box;
		  -webkit-transition: all .3s;
		  transition: all .3s;
		}
		.btn-12 span:nth-child(1) {
		  box-shadow:
		   -7px -7px 20px 0px #fff9,
		   -4px -4px 5px 0px #fff9,
		   7px 7px 20px 0px #0002,
		   4px 4px 5px 0px #0001;
		  -webkit-transform: rotateX(90deg);
		  -moz-transform: rotateX(90deg);
		  transform: rotateX(90deg);
		  -webkit-transform-origin: 50% 50% -20px;
		  -moz-transform-origin: 50% 50% -20px;
		  transform-origin: 50% 50% -20px;
		}
		.btn-12 span:nth-child(2) {
		  -webkit-transform: rotateX(0deg);
		  -moz-transform: rotateX(0deg);
		  transform: rotateX(0deg);
		  -webkit-transform-origin: 50% 50% -20px;
		  -moz-transform-origin: 50% 50% -20px;
		  transform-origin: 50% 50% -20px;
		}
		.btn-12:hover span:nth-child(1) {
		  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
		   7px 7px 20px 0px rgba(0,0,0,.1),
		   4px 4px 5px 0px rgba(0,0,0,.1);
		  -webkit-transform: rotateX(0deg);
		  -moz-transform: rotateX(0deg);
		  transform: rotateX(0deg);
		}
		.btn-12:hover span:nth-child(2) {
		  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
		   7px 7px 20px 0px rgba(0,0,0,.1),
		   4px 4px 5px 0px rgba(0,0,0,.1);
		 color: transparent;
		  -webkit-transform: rotateX(-90deg);
		  -moz-transform: rotateX(-90deg);
		  transform: rotateX(-90deg);
		}
    /* 按钮的左侧位置 */
    .positioned-div {  
    position: absolute;  
    top: 250px;  
    left: 90px;  
}
/* 按钮的右侧位置 */
.positioned-div2 {  
    position: absolute;  
    top: 250px;  
    left: 1400px;  
}


 /* 音乐按钮的样式 */
 .music-button {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url('./photo/图层\ 2.png'); /* 音乐开启时的图标 */
    background-size: cover;
    cursor: pointer;
  }

  /* 当音乐暂停时的按钮样式 */
  .music-button.paused {
    background-image: url('./photo/图层\ 1.png'); /* 音乐关闭时的图标 */
  }


    </style>  
</head>  
<body>  

    <h1>时尚餐厅</h1>
    <br>
    <div class="a">
   <img src="./photo/搜索.png" alt="">
    </div>
<br>
<strong>
<fieldset>  
    <legend>今日推荐</legend>  
<div class="photo-container">
      <div class="photo-row">  
          <img src="./美食/菜谱1.png"  alt="Image 1">  
          <img src="./美食/菜谱2.png"  alt="Image 2">  
          <img src="./美食/菜谱3.png"  alt="Image 3">  
      </div>  
      <div class="photo-row">  
          <img src="./美食/菜谱4.png" alt="Image 4">  
          <img src="./美食/菜谱5.png" alt="Image 5">  
          <img src="./美食/菜谱6.png" alt="Image 6">  
        </div>
  </div>
</fieldset>  
</strong>

<div class="x">
<img src="./photo/小猫.png" alt="" width="70px"height="70px">
<a href="./1主页面.html"><img src="./photo/退出登入.png" alt=""></a>
</div>
<a href="./5餐厅主页面.html"><img class="y" src="./photo/小房子.png" alt=""></a>

<div class="positioned-div">

<a href="./5餐厅主页面.html"><button class="custom-btn btn-12"><span>进入!</span><span>餐厅主页</span></button></a>
<br> <br><br><br>
<a href="./6菜谱.html"><button class="custom-btn btn-12"><span>进入!</span><span>餐厅菜谱</span></button> </a>
<br><br><br><br>
<a href="./15餐厅数据11111111.html"><button class="custom-btn btn-12"><span>进入!</span><span>餐厅数据</span></button> </a>
<br><br><br><br>
<a href="./16人员信息.html"><button class="custom-btn btn-12"><span>进入!</span><span>人员信息</span></button> </a>
</div>
<div class="positioned-div2">
<a href="./19查看订单.html"><button class="custom-btn btn-12"><span>进入!</span><span>查看订单</span></button></a>
<br> <br><br><br>
<a href="./17餐厅宗旨.html"><button class="custom-btn btn-12"><span>进入!</span><span>餐厅宗旨</span></button> </a>
<br><br><br><br>
<a href="./18联系餐厅.html"><button class="custom-btn btn-12"><span>进入!</span><span>联系餐厅</span></button> </a>
<br><br><br><br>
<a href="./21退出界面.html"><button class="custom-btn btn-12"><span>进入!</span><span>退出界面</span></button> </a>
</div>



<!-- 音乐文件，默认设置为循环播放 -->
<audio id="backgroundMusic" src="./音乐/圈9 - 萤火飞光.mp3" loop autoplay preload="auto">
	您的浏览器不支持音频元素。
	</audio>
	
	<!-- 音乐开关按钮 -->
	<div class="music-button" onclick="toggleMusic()"></div>
	

</body>  
<SCript src="音乐.JS"></SCript>
</html>